<template>
  <el-card class="box-card">
    <div class="text item">
      <el-table :data="apiData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" :row-class-name="tableRowClassName">
        <template v-for="(item,index) in tableData" :key="index">
          <el-table-column :prop="item.prop" :label="item.label" width="200">

          </el-table-column>
        </template>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 20, 40]"
      :page-size="pagesize" :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper"
      :total="apiData.length">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>

  export default {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        // console.log(`每页 ${currentPage} 条`);
      },
      handleSizeChange: function (pagesize) {
        this.pagesize = pagesize;
        // console.log(`当前页: ${pagesize}`);
      }

    },
    mounted() {

    },
    data() {
      return {
        apiData: [],
        tableData: [
          { label: 'Name_with_namespace', prop: "name_with_namespace" },
          { label: 'Projects ID', prop: "projectId" },
          { label: 'Owner', prop: "owner" },
          { label: 'created_at', prop: "created_at" },
          { label: 'http_url_to_repo', prop: "http_url_to_repo" },

        ],
        currentPage: 1,
        pagesize: 10,
      }
    },
    watch: {
      result(val) {
        this.apiData = val
        // console.log(this.apiData)

      }
    },
    props: ["result"]
  }
</script>
<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 1200px;
  }
</style>